<template>
  <rx-dialog @handOk="okFun" @cancel="cancel" :showok="false">
    <rx-layout>
      <div slot="center">
        <a-form-model ref="form"  :model="mdl"  :label-col="labelCol1" :wrapper-col="wrapperCol1">
              <a-form-model-item  :label="i18n('form.name','模板名称')" prop = "name"  >
                {{this.name}}
              </a-form-model-item>
              <a-form-model-item  :label="i18n('list.uploadExcel','上传Excel')" prop = "templateId" >
                <a-upload
                    accept=""
                    action="/api/api-system/system/core/sysFile/upload"
                    :multiple="false"
                    :headers="headers"
                    :file-list="fileList"
                    :before-upload="beforeFileUpload"
                    :remove="removeFile"
                >
                  <a-button>
                    <a-icon type="upload"/>
                    {{$ti18('rxList.upload','上传')}}
                  </a-button>
                  <a-button style="margin-left: 10px" type="primary" @click.stop="handleUpload()">{{$ti18('rxList.importBtn','导入')}}</a-button>
                </a-upload>
              </a-form-model-item>

        </a-form-model>
      </div>
    </rx-layout>
  </rx-dialog>
</template>

<script>
  import {RxDialog,BaseFormModel,Dialog,Util,TokenUtil} from "@lowcode/jpaas-common-lib";
  import AFormModelItem from "ant-design-vue/es/form-model/FormItem";
  import ImportExcelApi from '@/api/system/core/importExcel'

  export default {
    name: 'ImportExcelExecute',
    mixins:[BaseFormModel],
    components: {
      AFormModelItem,
      RxDialog,
    },
    props: ["layerid", "destroy", "name", "gridData","headerContent", "pkId"],
    data() {
        return {
            fileList: [],
            file: {},
            fileZipTypes: ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
            headers: {},
        }
    },
      created () {
          var token = TokenUtil.getToken();
          if (token) {
              this.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
          }
      },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"ImportExcel",key);
      },
      removeFile(info) {
        this.fileList.splice(0, 1);
        this.file = {};
      },

      beforeFileUpload(file) {
        if (!file || !file.type || this.fileZipTypes.indexOf(file.type)==-1) {
          this.$confirm({
            title: this.$ti18('rxMsa.masWarn.delInfo','警告'),
              zIndex:20000,
            content: this.i18n('msa.formatError','Excel导入格式错误！'),
              okText: this.$ti18('rxForm.ackBtn','确认'),
              cancelText: this.$ti18('rxForm.cancelBtn','取消'),
          });
          return;
        }
        this.file = file;
        this.fileList.push({
          uid: file.uid,
          name: file.name,
          status: 'done',
          url: null
        });
        return true;
      },

      handleUpload() {
        const {
          fileList
        } = this;
        if(!this.file.uid){
            this.$message.error(this.i18n('msa.updateDesc','请上传模板！'));
            return;
        }
        const formData = new FormData();
        let timestamp = new Date().getTime();
        formData.append('file', this.file);
        formData.append("fileUid", Util.encryptWord(this.file.uid,true));
        formData.append("time", Util.encryptWord(timestamp,true));
        formData.append("pkId",this.pkId);
        this.uploadFile(formData);
      },
      uploadFile(formData, type) {
        let self = this;
        ImportExcelApi.executeImport(formData).then(res => {
          if (res.success) {
              Util.closeWindow(this, "ok");
          }
        });
      },

      okFun() {
        Util.closeWindow(this, "ok");
      },
      cancel() {
        Util.closeWindow(this, "cancel");
      }

    }

  }
</script>
